<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
    <style>
        /* 导航栏开始 */
        
        body {
            background-color: #111111;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        .main_top {
            width: 1920px;
            height: 110px;
            margin: 0 auto;
        }
        
        .main_top ul {
            float: left;
            margin-top: 32px;
        }
        
        .top_left {
            width: 300px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 25px;
            color: #fff;
            float: left;
            margin-right: 290px;
        }
        
        .main_top li {
            height: 45px;
            text-align: center;
            line-height: 60px;
            float: left;
            color: #fff;
            margin-right: 40px;
        }
        
        .main_top li:hover {
            color: rgb(0, 157, 249);
            border-bottom: 2px solid rgb(0, 157, 249);
            cursor: pointer;
        }
        
        .main_top span {
            color: #fff;
        }
        
        #time {
            float: right;
            color: #fff;
            width: 200px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            margin-left: 50px;
            margin-top: 36px;
        }
        
        .user {
            float: right;
            width: 200px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            margin-top: 36px;
        }
        
        .user span {
            color: #fff;
            text-decoration: underline;
        }
        /* 导航栏结束 */
        
        .box-center {
            width: 1920px;
            height: 1143px;
            margin: 0 auto;
            background-color: #111111;
        }
        
        .left {
            width: 600px;
            height: 100%;
            position: relative;
            float: left;
        }
        
        .left-top {
            width: 624px;
            height: 416px;
            position: relative;
            right: 0px;
            top: 20px;
        }
        
        .dangri {
            position: absolute;
            top: 47px;
            left: 28px;
            font-size: 20px;
        }
        
        .left-top div {
            color: white;
        }
        
        .num {
            float: left;
            width: 62px;
            height: 85px;
            border: 1px solid #04E38A;
            font-size: 34px;
            font-weight: 700;
            line-height: 85px;
            text-align: center;
            color: #04E38A;
            margin-right: 5px;
            overflow: hidden;
        }
        
        .left-top div span {
            width: 62px;
            height: 85px;
            display: block;
        }
        
        .num1 {
            margin-left: 257px;
        }
        
        .num {
            margin-top: 20px;
        }
        
        #zhexian {
            width: 600px;
            height: 300px;
            position: absolute;
            bottom: 162px;
            background: url(images/1.png) no-repeat;
            background-size: 100% 100%;
        }
        
        .right {
            width: 1320px;
            height: 100%;
            background-color: #111111;
            float: left;
        }
        
        .one h2 {
            color: white;
            margin-left: 30px;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        
        .one {
            width: 350px;
            height: 200px;
            background-color: #414141;
            border: 1px solid #414141;
            border-radius: 25px 25px 25px 25px;
            margin-left: 20px;
            float: left;
        }
        
        .kwh {
            color: #32D38F;
            font-size: 35px;
            margin-left: 27px;
            margin-top: 15px;
            margin-bottom: 15px;
        }
        
        .title {
            color: #828282;
            font-size: 14px;
            margin-left: 29px;
            margin-top: 5px;
        }
        
        .title1 span:nth-child(1) {
            color: white;
            margin-left: 29px;
        }
        
        .title1 span:nth-child(2) {
            color: #04E38A;
        }
        
        .clearfix {
            content: '.';
            display: block;
            height: 0;
            clear: both;
            /* 隐藏之后，仍然元素还存在，仍然还占位 */
            visibility: hidden;
        }
        
        .two {
            float: left;
            width: 525px;
            height: 201px;
            margin-left: 34px;
            background-color: #414141;
        }
        
        .panel {
            width: 216px;
            height: 85px;
            margin-left: 20px;
            background-color: #414141;
            margin: 0px auto;
            border-radius: 10px;
        }
        /* 每个盒子的元素 */
        
        .item1 {
            width: 100px;
            height: 200px;
            padding: 10px 50px;
            /* background-color: skyblue; */
        }
        
        .chip {
            width: 30px;
            height: 30px;
            position: relative;
            top: 30px;
            left: 0;
            /* 滤镜 */
            filter: drop-shadow(0 3px 5px rgba(4, 227, 138, 0.8))
        }
        
        .chip img {
            width: 30px;
            height: 30px;
        }
        
        .circle1 {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 1px solid rgba(4, 227, 138, 0.5);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        .circle2 {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid rgba(4, 227, 138, 0.5);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        .two01 p:nth-child(2) {
            font-size: 28px;
            margin-top: 10px;
            color: #04E38A;
            margin-left: 38px;
            margin-bottom: 0px;
        }
        
        .two01 p:nth-child(3) {
            color: white;
            font-size: 13px;
            margin-left: 40px;
        }
        
        .two01 {
            float: left;
            width: 144px;
            height: 100%;
        }
        
        .two02 {
            float: left;
            width: 125px;
            height: 100%;
        }
        
        .two03 {
            float: left;
            width: 206px;
            height: 100%;
            margin-left: 39px;
        }
        
        .two01 p:nth-child(4) {
            color: white;
            font-size: 13px;
            margin-left: 54px;
        }
        
        .two02 p:nth-child(2) {
            font-size: 28px;
            margin-top: 10px;
            color: #04E38A;
            margin-left: 38px;
            margin-bottom: 0px;
        }
        
        .two02 p:nth-child(3) {
            color: white;
            font-size: 13px;
            margin-left: 40px;
        }
        
        .two02 p:nth-child(4) {
            color: white;
            font-size: 13px;
            margin-left: 54px;
        }
        
        .two03 p:nth-child(2) {
            font-size: 28px;
            margin-top: 10px;
            color: #04E38A;
            margin-left: 38px;
            margin-bottom: 0px;
        }
        
        .two03 p:nth-child(3) {
            color: white;
            font-size: 13px;
            margin-left: 40px;
        }
        
        .two03 p:nth-child(4) {
            color: white;
            font-size: 13px;
            margin-left: 54px;
        }
        
        .right-middle {
            width: 1320px;
            height: 320px;
            background-color: #414141;
        }
        
        .right-top {
            height: 247px;
            margin-bottom: 47px;
        }
        
        #main {
            background-color: #414141;
            border-radius: 10px;
            margin-left: 24px;
            margin-top: 75px;
            float: left;
        }
        
        #main01 {
            float: left;
            margin-left: 56px;
            margin-top: px;
            background-color: #414141;
        }
        
        .right-bot {
            width: 1250px;
            height: 497px;
            /* background-color: #04E38A; */
            margin-top: 51px;
            margin-left: 70px;
        }
        
        .right-middle {
            height: 396px;
            border-radius: 25px 25px 25px 25px;
        }
        
        .bott {
            width: 188px;
            height: 479px;
            margin-right: 20px;
            /* background-color: aqua; */
            float: left;
        }
    </style>
</head>

<body>

    <!-- nav开始 -->

    <div class="main_top">

        <p class="top_left">智慧园区可视化平台</p>
        <ul>

            <li>营区态势</li>

            <li>出入管理</li>

            <li>监控点位</li>

            <li>能耗管理</li>

            <li>配置中心</li>
        </ul>



        <div class="user">
            <span>Admin</span>
        </div>



        <div id="time"></div>









    </div>
    <!-- nav结束 -->

    <div class="box-center">
        <div class="left">

            <div class="left-top">
                <div class="dangri">当日能耗</div>

                <div class="num1 num">
                    <span>4</span>
                </div>
                <div class="num2 num">
                    <span>8</span>
                </div>
                <div class="num3 num">
                    <span>7</span>
                </div>
                <div class="num4 num">
                    <span>3</span>
                </div>
                <div class="num5 num">
                    <span>0</span>
                </div>

                <div id="zhexian" style="width: 600px;height:146px;"></div>

            </div>
            <div id="left-middle" style="width: 600px;height:400px;"></div>
            <div id="left-bot" style="width: 600px;height:347px;"></div>
        </div>
        <div class="right">
            <div class="right-top">
                <div class="one">
                    <h2>平均日用量</h2>
                    <p class="kwh">6,876 kwh</p>
                    <p class="title">按吨日用量&emsp;&emsp;环比变化</p>
                    <p class="title1"><span>2,802</span>&emsp;&emsp;&emsp;<span>-1%</span></p>
                </div>
                <div class="one">
                    <h2>装机容量</h2>
                    <p class="kwh">96，790 KVA</p>
                    <p class="title">能耗均值&emsp;&emsp;小时最大能耗</p>
                    <p class="title1"><span>1834</span>&emsp;&emsp;&emsp;<span>2，919</span></p>
                </div>

                <div class="two">
                    <div class="two01">
                        <div class="panel">
                            <div class="item1">
                                <div class="chip">
                                    <div class="circle1"></div>
                                    <div class="circle2"></div>
                                    <img src="images/chip.svg" alt="">
                                </div>
                                <!-- <span class="count">273</span>
                                <span class="count-text">主变台数</span>
                                <span>(台)</span> -->
                            </div>

                        </div>
                        <p>273</p>
                        <p>主变台数</p>
                        <p>(台)</p>
                    </div>
                    <div class="two02">
                        <div class="panel">
                            <div class="item1">
                                <div class="chip">
                                    <div class="circle1"></div>
                                    <div class="circle2"></div>
                                    <img src="images/chip.svg" alt="">
                                </div>
                                <!-- <span class="count">273</span>
                                <span class="count-text">主变台数</span>
                                <span>(台)</span> -->
                            </div>

                        </div>
                        <p>50,170</p>
                        <p>计量台数</p>
                        <p>(个)</p>
                    </div>


                    <div class="two03">

                        <div class="panel">
                            <div class="item1">
                                <div class="chip">
                                    <div class="circle1"></div>
                                    <div class="circle2"></div>
                                    <img src="images/chip.svg" alt="">
                                </div>
                                <!-- <span class="count">273</span>
                                <span class="count-text">主变台数</span>
                                <span>(台)</span> -->
                            </div>

                        </div>
                        <p>101</p>
                        <p>闯关数量</p>
                        <p>(个)</p>


                    </div>
                </div>
                <div class="three">

                </div>
            </div>
            <div class="right-middle">
                <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                <div id="main" style="width: 600px;height:320px;"></div>
                <div id="main01" style="width: 600px;height:393px;"></div>
            </div>
            <div class="right-bot">
                <div class="bot-1 bott">
                    <div id="biaoge01" style="width: 188px;height:204px;"></div>
                </div>
                <div class="bot-2 bott">
                    <div id="biaoge02" style="width: 188px;height:204px;"></div>
                </div>
                <div class="bot-3 bott">
                    <div id="biaoge03" style="width: 188px;height:204px;"></div>
                </div>
                <div class="bot-4 bott">
                    <div id="biaoge04" style="width: 188px;height:204px;"></div>
                </div>
                <div class="bot-5 bott">
                    <div id="biaoge05" style="width: 188px;height:204px;"></div>
                </div>
                <div class="bot-6 bott">
                    <div id="biaoge06" style="width: 188px;height:204px;"></div>
                </div>
            </div>

        </div>


    </div>


    <script>
        function showTime() {  
            var date = new Date();

               // 年月日
              
            var year = date.getFullYear();  
            var month = date.getMonth() + 1;  
            var day = date.getDate();

               // 时分秒
              
            var hour = date.getHours();  
            var minute = date.getMinutes();  
            var second = date.getSeconds();

               // 实时显示
              
            var element = document.getElementById('time');  
            element.innerHTML = '<span>' + year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        }
        setInterval('showTime()', 1000);
        var num5 = document.querySelector('.num5');
        var num = 0;
        // 定时器 间歇定时器
        setInterval(function() {
            var spanOld = document.querySelectorAll('.num5 span');
            if (spanOld.length > 1) {
                // 移除节点
                spanOld[0].remove();
            }
            num++;
            if (num > 9) {
                num = 0
                naxilleishangn

                // 增加span的元素
                var addSpan = document.createElement('span');
                addSpan.innerText = num;
                m
                // 增加到页面上
                num5.appendChild(addSpan);
                // 获取所有的span元素
                var spans = document.querySelectorAll('.num5 span');
                spans[0].style.animation = 'moveNum2 1s forwards';
                spans[1].style.animation = 'moveNum1 1s forwards';
            }

        }, 2000)


        console.log(window);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('left-middle'));

        // 指定图表的配置项和数据
        var option = {
            xAxis: {
                // 值
                type: 'category',
                data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
                axisTick: {
                    show: false
                },
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            yAxis: {
                // 类目
                type: 'value',
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            legend: {
                data: ['今日能耗'],
                right: 100
            },
            series: [{
                name: '今日能耗',
                data: [6, 160, 48, 45, 50, 250, 200, 180, 230, 70, 180, 55, 0],
                type: 'line',
                // type: 'bar',
                // 平滑的折线图
                smooth: true,
                // 拐点的样式
                symbol: 'circle',
                // 折线图中拐点的大小
                symbolSize: 5,
                // 拐点的颜色
                itemStyle: {
                    color: '#04E38A',
                },
                // 折线的颜色
                lineStyle: {
                    color: '#04E38A'
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        var myChart = echarts.init(document.getElementById('left-bot'));


        var option = {
            xAxis: {
                type: 'category',
                data: ['5.10', '5.11', '5.12', '5.13', '5.14', '5.15', '5.16'],
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            series: [{
                data: [55, 20, 33, 40, 21, 60, 60],
                type: 'bar',
                itemStyle: {
                    color: ' #08A465'
                }
            }]
        };

        myChart.setOption(option);

        // 饼图开始
        console.log(window);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            // 标识信息的样式
            legend: {
                orient: 'vertical',
                top: '30%',
                left: '10%'
            },
            // 提示框
            tooltip: {

                textStyle: {
                    color: '#FFFFFF'
                }
            },
            // 调色盘颜色列表
            color: ['#009DFF', '#22E4FF', '#3BFFD0', '#04E38A', '#9DFF86', '#FEE588'],
            series: [{
                type: 'pie',
                left: '40%',
                // 高亮的样式
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                // label线的样式
                label: {
                    show: true,
                    formatter(param) {
                        console.log(param);
                        // correct the percentage
                        // return param.name + ' (' + param.percent * 2 + '%)';
                        return param.percent * 2 + '%';
                    }
                },


                data: [{
                    value: 335,
                    name: '空调系统'
                }, {
                    value: 234,
                    name: '照明系统'
                }, {
                    value: 1548,
                    name: '洗手间'
                }, {
                    value: 1548,
                    name: '监控系统'
                }, {
                    value: 1548,
                    name: '办公室'
                }, {
                    value: 1548,
                    name: '管理处'
                }],
                // 圆环图
                radius: ['30%', '60%']
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        // 饼图结束


        // 柱状图和折现图开始




        var bot = echarts.init(document.getElementById('main01'));


        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'bar',
                    showBackground: true,

                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                                // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                                offset: 0,
                                color: '#79FBDF'
                            }, {
                                offset: 1,
                                color: '#0FE18F'
                            }]),
                        }
                    }
                    // backgroundStyle: {
                    //     color: 'rgba(180, 180, 180, 0.2)'
                    // }
                }, {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line',
                    symbol: 'circle', //拐点样式
                    symbolSize: 18, //拐点大小
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 3, //折线宽度
                                // color: "#FF0000" //折线颜色
                                color: "#D9DD02"
                            },
                            color: "#D9DD02", //拐点颜色
                            borderColor: '#000000', //拐点边框颜色
                            borderWidth: 3 //拐点边框大小
                        },
                        emphasis: {
                            color: '#000000' //hover拐点颜色定义
                        },

                        series: {
                            type: 'bar',
                            barWidth: 10,
                            stack: 'total',
                            data: this.seriesData,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                        // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                                        // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                                        offset: 0,
                                        color: '#4d76ff'
                                    }, {
                                        offset: 1,
                                        color: '#80aaff'
                                    }]),
                                }
                            },
                        }





                    },
                }

            ]
        };

        bot.setOption(option);
        // 柱状图和折现图结束


        // 折线图集合开始

        var biaoge = echarts.init(document.getElementById('biaoge01'));

        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }





            },
            yAxis: {
                type: 'value',
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#0DCD88'
                }
            }]
        };

        biaoge.setOption(option);

        var biaoge = echarts.init(document.getElementById('biaoge02'));

        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: { //y轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            series: [{
                data: [752, 632, 901, 534, 1090, 1230, 1320],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#0DCD88'
                }
            }]
        };

        biaoge.setOption(option);

        var biaoge = echarts.init(document.getElementById('biaoge03'));

        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: { //y轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            series: [{
                data: [620, 532, 201, 734, 1390, 1330, 1320],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#0DCD88'
                }
            }]
        };

        biaoge.setOption(option);

        var biaoge = echarts.init(document.getElementById('biaoge04'));

        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: { //y轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            series: [{
                data: [520, 332, 101, 934, 1090, 1230, 1320],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#0DCD88'
                }
            }]
        };

        biaoge.setOption(option);

        var biaoge = echarts.init(document.getElementById('biaoge05'));

        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#0DCD88'
                }
            }]
        };

        biaoge.setOption(option);

        var biaoge = echarts.init(document.getElementById('biaoge06'));

        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: { //x轴文字的配置
                    textStyle: {
                        color: "#FFFFFF",

                    },
                    // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
                }
            },
            series: [{
                data: [620, 932, 901, 934, 550, 1230, 420],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#0DCD88'
                }
            }]
        };

        biaoge.setOption(option);
        // 折线图集合结束
    </script>



</body>

</html>